<template>
  <!-- <div>
    <el-submenu
      v-if="treedata.child && treedata.child.length > 0"
      :index="treedata.key"
    >
      <template slot="title">
        <i :class="treedata.ico" v-if="treedata.ico"></i>
        <span slot="title">{{ treedata.value }}</span>
      </template>
      <div v-for="(children, index) in treedata.child" :key="index">
      递归调用自身，这里主要根据name的名字
        <tree-item :treedata="children"></tree-item>
      </div>
    </el-submenu>
    <el-menu-item v-else :index="treedata.key">
      <i :class="treedata.ico" v-if="treedata.ico"></i>
      <span slot="title">{{ treedata.value }}</span>
    </el-menu-item>
  </div> -->
  <div>
    <el-submenu
      v-if="treedata.children && treedata.children.length > 0"
      :index="treedata.path"
    >
      <template slot="title">
        <!-- <i :class="treedata.ico" v-if="treedata.ico"></i> -->
        <span slot="title">{{ treedata.meta.title }}</span>
      </template>
      <div v-for="(children, index) in treedata.children" :key="index">
        <tree-item :treedata="children"></tree-item>
      </div>
    </el-submenu>
    <el-menu-item v-else :index="treedata.path">
      <i :class="treedata.ico" v-if="treedata.ico"></i>
      <span slot="title">{{ treedata.meta.title }}</span>
    </el-menu-item>
  </div>
</template>
<script>
export default {
  name: "treeItem",
  props: ["treedata"],
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}
</style>